import React, { useEffect, useState, useRef } from "react"
import styles from "./index.module.css";
import 'antd/dist/antd.css';
import { Input, Space, Table } from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import getList from "./fetch";
import {useFilter,useTable} from "./useFilter"
const { Search } = Input;

const StudenList = () => {
    const { nameList,
        ageList,
        handlerName,
        handlerAge } = useFilter();
    const {
        useList,
        getUser,
        columns
    } =useTable();
    useEffect(() => {
        getUser();
    }, []);
    
    return (
        <>
            <div className={styles["top"]}>
                姓名：  <Input placeholder="输入姓名" style={{ width: 304 }} value={nameList} onChange={handlerName} />
                输入年龄 <Search placeholder="输入年龄" style={{ width: 304 }} value={ageList} onChange={handlerAge} />
            </div>
            <div className="bottom">
                <Table columns={columns} dataSource={useList} />
            </div>
        </>
    )
}
export default StudenList